<template>
	<view class="conter">
		<!-- boby大盒子 -->
		<view class="box">
			<view class="iconview" v-if="Object.keys(collectionList).length != 0">
				<view class="iconviewone">
					<view class="iconviewtow">
						<u--image width="315rpx" height="316rpx" radius="9rpx 9rpx 0 0" :src="imgUrl + collectionList.ornamentImg"></u--image>
					</view>
					<view class="iconviewthree">
						<view class="iconviewthree2">{{ collectionList.ornamentName }}</view>
						<view class="upper-half">拥有 : {{ collectionList.number ? collectionList.number : 0 }}</view>
					</view>
				</view>
			</view>
			<view class="" v-if="Object.keys(collectionList).length == 0">
				<view class="">
					<image style="width: 280rpx; height: 280rpx; margin: 270rpx 250rpx 0" src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 00 -->
		<!-- boby大盒子 -->
		<!-- 点击底部弹出 -->
	</view>
</template>
<script>
import { getJewelry } from '@/api/venue/venue.js';
import config from '@/config';
export default {
	data() {
		return {
			show: false,
			activeIndex: -1,
			collectionList: {},
			imgUrl: config.gillUrl
		};
	},
	created() {
		this.getCollectionList();
	},
	onShow() {
		this.getCollectionList();
	},
	watch: {
		$route: function (newRoute, oldRoute) {
			if (newRoute.path !== oldRoute.path) {
				this.getCollectionList();
			}
		}
	},
	methods: {
		async getCollectionList() {
			const data = await getJewelry();
			console.log(data);
			if (data.data) {
				this.collectionList = data.data;
			}
		},
		goMonPurchase(item) {
			uni.navigateTo({
				url: `/pages/consignment/cangHouse?mature=${item.mature}&id=${item.id}` // 跳转到目标页面的路径
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.conter {
	.box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.iconviewone {
			width: 320rpx;
			height: 410rpx;
			margin: 20rpx 10rpx 0rpx 30rpx;
			border-radius: 9rpx;
			position: relative;
			.iconviewtow {
				width: 316rpx;
				height: 316rpx;
				border-top: 1rpx solid #3c424d;
				border-left: 1rpx solid #3c424d;
				border-right: 1rpx solid #3c424d;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
			}
			.iconviewthree {
				position: relative;
				width: 316rpx;
				height: 92rpx;
				border-bottom: 1rpx solid #3c424d;
				border-left: 1rpx solid #3c424d;
				border-right: 1rpx solid #3c424d;
				background: #1c1f25;
				border-radius: 0rpx 0rpx 9rpx 9rpx;
				border-top: none;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				.iconviewthree2{
					position: absolute;
					top: 15rpx;
					left: 20rpx;
				}
				.upper-half {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					color: #8a92a3;
					font-size:24rpx;
				}
			}
		}
	}
}
</style>